<template>
	<view class="mask">
		<view class="content" v-if="!isShowZl">
			<image @click="closePwPage()" class="close" src="@/static/icon1/07.png"></image>
			<view class="info">
				<view class="info-title-view">
					<text>账号被限制接单中</text>
					<text>封禁原因：{{reason}}</text>
				</view>
				<view class="info-time">
					<view class="time-view">{{fjTime.day<10?'0':''}}{{fjTime.day}}</view>
					<view class="time-day">天</view>
					<view class="time-view">{{fjTime.hour<10?'0':''}}{{fjTime.hour}}</view>
					<view class="time-semicolon">:</view>
					<view class="time-view">{{fjTime.minue<10?'0':''}}{{fjTime.minue}}</view>
					<view class="time-semicolon">:</view>
					<view class="time-view">{{fjTime.seconds<10?'0':''}}{{fjTime.seconds}}</view>
				</view>
				<view class="info-alert">
					<view class="info-alert-item">
						<image src="../../static/icon3/popupWatch/bm.png" mode="aspectFill"></image>
						<text>无法报名</text>
					</view>
					<view class="info-alert-item">
						<image src="../../static/icon3/popupWatch/tx.png" mode="aspectFill"></image>
						<text>无法提现</text>
					</view>
				</view>
			</view>
			<view v-if="type==1" class="button" @click="isShowZl=true">
				<image src="../../static/icon3/popupWatch/zl.png" mode="aspectFill"></image>
				<text>助力解禁</text>
			</view>
			<view v-if="type==2" class="button" @click="yajin()">
				<image src="../../static/icon3/popupWatch/yj.png" mode="aspectFill"></image>
				<text>押金解禁</text>
			</view>
			<view v-if="type==3" class="button" @click="jiefeng()">
				<image src="../../static/icon3/popupWatch/yj.png" mode="aspectFill"></image>
				<text>{{"支付解封金额"+amountFrozen+"元"}}</text>
			</view>
			<view class="button" @click="shensu()">
				<!-- <image src="../../static/icon3/popupWatch/yj.png" mode="aspectFill"></image> -->
				<text>申诉</text>
			</view>
		</view>
		<!-- 		<pay v-if="isShowPay" @closePayPage="closePayPage()" :info='payInfo' :price="amountFrozen" :isPwd="false"
			:modalText1="'距离解封就差一步了'" :UnsealId="UnsealId"></pay> -->
		<ChangePay @closePayPage='closePayPage' v-if="isShowPay" :title='payInfo' :monery='amountFrozen'
			:unsealId='UnsealId' :url="`${$api.v1_pay_penalty}`" keyWorld='commodityPrice' :contnet="requestObj"
			isJson='0' buycode=1 @paySuccess='paySuccess'>
		</ChangePay>
		<!-- <jfzl v-if="isShowZl" :isShowMask="false" @closerZl="closerZl()"></jfzl> -->
	</view>
</template>
<script>
	import unit from '../../libs/newUnit.js'
	import pay from './jfpay.vue'
	import jfzl from './jf-zl.vue'
	import {
		queryTimeByStamp
	} from '../../libs/unit.js'
	export default {
		data() {
			return {
				requestObj: {
					unsealId: 0, //封号的记录的ID
				},
				isFengjin: false,
				fjTime: {
					day: 0,
					hour: 0,
					minue: 0,
					seconds: 0,
				},
				timer: null,
				type: 0, //解封类型(1助力2押金)
				isShowPay: false,
				payInfo: `1、支付解封金后立即解禁
					2、解封金一旦支付，恕不退还
					3、解封金只对本次有效，请切勿再次违规`,
				amountFrozen: 0,
				UnsealId: 0,
				reason: '',
				isShowZl: false,
				fjLine: null
			}
		},
		components: {
			pay,
			jfzl,
		},
		methods: {
			paySuccess() {
				uni.navigateTo({
					url: '/pages/Succeed/Succeed?title=解禁罚金已经支付！&buttonTitle=返回首页&info=&name=支付成功'
				})
			},
			shensu() {
				uni.navigateTo({
					url: "/pages/appeal/appeal"
				})
			},
			closePwPage() {
				this.$emit('closePwPage')
			},
			Closure_time() {
				unit.Closure_time().then(v => {
					if (v.code) {
						return uni.showToast({
							title: v.msg,
							icon: 'none'
						})
					}
					this.isFengjin = v.data == 0 ? false : v.data.status == 0 ? true : false;
					if (this.isFengjin) {
						this.fjLine = v.data.datime
						console.log(this.fjLine)
						this.fjTime = queryTimeByStamp(this.fjLine)
						this.type = v.data.type
						if (this.type == 3) {
							//this.amountFrozen = v.data.deposit/100
							this.amountFrozen = v.data.penalty / 100
						}
						this.reason = v.data.reason
						this.UnsealId = v.data.id
						this.requestObj.unsealId = v.data.id
						this.timer = setInterval(() => {
							this.getTime()
						}, 1000)
					}
				})
			},
			getTime() {
				if (this.fjTime.day <= 0 && this.fjTime.hour <= 0 && this.fjTime.minue <= 0 && this.fjTime.seconds <= 0) {
					clearInterval(this.timer)
				}
				this.fjLine -= 1000
				this.fjTime = queryTimeByStamp(this.fjLine)
			},
			closePayPage() {
				this.isShowPay = false
				this.closePwPage()
			},
			closerZl() {
				this.isShowZl = false
			},
			yajin() {
				this.isShowPay = true
			},
			jiefeng() {
				this.isShowPay = true
			}
		},
		beforeMount() {
			if (this.timer) {
				clearInterval(this.timer)
			}
			this.Closure_time()
			console.log("111", this.type);
		},
		beforeDestroy() {
			console.log("222");
			if (this.timer) {
				clearInterval(this.timer)
				this.fjTime
			}
		},
	}
</script>
<style lang="less" scoped>
	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
	}

	.content {
		position: fixed;
		width: 630rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
	}

	.close {
		width: 68rpx;
		height: 68rpx;
		margin-bottom: 60rpx;
	}

	.info {
		width: 630rpx;
		height: 557rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.button {
		width: 630rpx;
		height: 88rpx;
		background: linear-gradient(0deg, #FE4B28, #F20201);
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&>image {
			height: 32rpx;
			width: 32rpx;
			margin-right: 4rpx;
		}

		&>text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}

	.info-title-view {
		margin-top: 60rpx;
		margin-bottom: 32rpx;
		height: 84rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		&>text:nth-child(1) {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1A1A1A;
		}

		&>text:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #515151;
		}
	}

	.info-time {
		height: 80rpx;
		width: 510rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time-view {
		width: 80rpx;
		height: 80rpx;
		background: #FE4B28;
		border-radius: 12rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.time-day {
		width: 28rpx;
		height: 28rpx;
		background: #FE4B28;
		border-radius: 50%;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
		margin: 0 4rpx 0 4rpx;
	}

	.time-semicolon {
		width: 16rpx;
		height: 25rpx;
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FE4B28;
		line-height: 25rpx;
		text-align: center;
	}

	.info-alert {
		width: 510rpx;
		height: 209rpx;
		background: #F2F2F2;
		border-radius: 12rpx;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.info-alert-item {
		width: 383rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		&>image {
			width: 99rpx;
			height: 98rpx;
			margin-bottom: 20rpx;
		}

		&>text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #515151;
		}
	}
</style>